<template>
  <div id>
    <div class="boxs">
      <div class="boxs_left"></div>
      <div class="boxs_right">
        <div class="dmoney">
          <span class="b_title">
            <img src="../../../../assets/image/home/kjjk.png" />
          </span>
          <div class="b_form">
            <el-form label-width="80px" action>
              <el-form-item label="支付方式" style="margin-left: 20%;">
                <i>
                  <img
                    src="../../../../assets/image/home/zhifubao.png"
                    style="height: 20px;margin-top: 8px;"
                  />
                </i>
              </el-form-item>
              <el-form-item label="捐赠意向" style="margin-left: 20%;">
                <el-input style="width: 250px;" v-model="info"></el-input>
              </el-form-item>
              <el-form-item label="捐赠金额" style="margin-left: 20%;">
                <el-input style="width: 250px;" v-model="amount"></el-input>元
              </el-form-item>
              <div
                id
                style="position: relative;margin-left: 10%;color: red;"
              >(捐赠金额1元起捐，多少无拘。感谢您对青少年的关爱！)</div>
              <br />
              <div style="margin-left: 30%;">
                <el-radio v-model="radio" label="1">匿名</el-radio>
                <el-radio v-model="radio" label="2">实名</el-radio>
                <span class="jw" @click="toJw">去捐物>></span>
              </div>
              <el-button
                type="success"
                style="margin-left: 45%;width: 120px;margin-top: 5%;"
                @click.native="pay"
              >立即捐赠</el-button>

              <div ref="myroot"></div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="html" >

    </div>-->
  </div>
</template>

<script>
import { pay, dmoney } from "network/pay";
import $ from "jquery";
export default {
  data() {
    return {
      radio: "1",
      name: "",
      money: "",
      html: "",
      info: "",
      amount: "",
      file: "",
      id: ""
    };
  },

  watch: {
    html() {
      this.html = this.html;
    },
    info() {
      this.info = this.info;
    },
    amount() {
      this.amount = this.amount;
    }
  },
  methods: {
    pay() {
      /* const _this=this; */
      this.id = this.$route.query.recipientId;
      console.log(this.id);
      let formData = new FormData();
      formData.append("recipientId", this.id);
      formData.append("donationMoney", this.amount);
      dmoney(formData).then(res => {
        console.log(res);
      });
      $.ajax({
        url: "api/sys/api/pay", //请求路径
        data: {
          amount: this.amount,
          id: Math.ceil(Math.random() * 1000000),
          // id:123987,
          info: this.info
        },
        /* async: false, */
        type: "POST", //GET
        //dataType: "JSON",//需要返回JSON对象(如果Ajax返回的是手动拼接的JSON字符串,需要Key,Value都有引号)
        success: function(resp) {
          //处理 resp.responseText;
          console.log(resp);
          const res = resp;
          document.querySelector("body").innerHTML = res;

          const div = document.createElement("div"); // 创建div
          div.innerHTML = res; // 将返回的form 放入div
          document.body.appendChild(div);
          document.forms[0].submit();
        },
        error: function(a, b, c) {}
      });
    },
    toJw() {
      this.$router.push({
        path: "/goods",
        query: {
          recipientId: this.$route.query.recipientId
        }
      });
    }
  }
};
</script>

<style>
.boxs {
  width: 100%;
  height: 500px;
}

.boxs_left {
  width: 40%;
  height: 80%;
  float: left;
  margin: 5%;
  background-image: url(../../../../assets/image/home/paybg.png);
  background-position: center center;
  background-size: cover;
  border-radius: 10px;
  cursor: pointer;
}

.boxs_left:hover {
  box-shadow: inset 0px 0px 10px #fff, inset -10px 0px 20px #0ff,
    inset 0px 0px 20px #f0f, inset -10px 0px 20px #0ff, 0px 0px 10px #fff,
    -10px 0px 10px #f0f, 10px 0px 10px #0ff;
}

.boxs_right {
  width: 40%;
  height: 90%;
  float: left;
  margin-top: 5%;
}

.b_title {
  width: 86px;
  height: 24px;
  position: relative;
  left: 55%;
}

.b_form {
  width: 90%;
  height: 75%;

  position: relative;
  margin: 10%;
}

.dmoney {
  width: 100%;
  height: 100%;
  float: left;
}

.jw {
  color: red;
  margin-left: 10px;
}

.jw:hover {
  cursor: pointer;
}
</style>
